<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./js/angular.min.js"></script>
<script type="text/javascript" src="./js/angular-route.js"></script> 
<script type="text/javascript" src="./js/angular-ui-router.js"></script>
</head>
<body>
<!-- <div ng-app="myApp">
    <a href="#/home">home</a>
    <a href="#/music">music</a>
    <a href="#/home/test01">home/test01</a>
    <div ui-view></div>
    <script type="text/ng-template" id='a'>
        <h3><a href="#/home/test01">home/test01</a></h3>
    </script>
    <script type="text/ng-template" id='b'><h1>你好music</h1></script>
    <script type="text/ng-template" id='c'><h1>cccccccccc</h1></script>
</div>
<script type="text/javascript">
var myApp = angular.module("myApp", ["ui.router"]);
//myApp.config(function ($stateProvider, $urlRouterProvider){});
myApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.when("", "/home");
    $stateProvider.state("home",{
        url : "/home",
        templateUrl : "a",       
    }).state("music",{
        url : "/music",
        templateUrl : 'b'
    }).state('homed',{
        url : "/home/test01",
        template : 'c'
    });
}]); 
</script> -->
<!--
<div ng-app="myApp" >
    <a ui-sref="parent">点我显示父view内容</a>    
    <div ui-view></div>  
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);   
app.config(["$stateProvider",  function ($stateProvider) {      
    $stateProvider     
    .state("parent", {//父路由
        url: '/parent',  
        template:'<div>parent'
                +'<div ui-view><a ui-sref="parent.child">点我显示父view与子view内容</a><div>'// 子View
                +'</div>'
    })      
    .state("parent.child", {//子路由
        url: '/child',    
        template:'<div>child</div>'
    })     
}]);
</script>
-->
<!-- <style type="text/css">
*{margin:0px; padding:0px; text-decoration: none; font-size:16px; font-family:"微软雅黑";}
div.myApp{width:500px; height:300px; border:1px solid red; margin:0px auto;}
div.myAppTop{line-height: 30px; border-bottom: 1px solid red;}
div.myAppTop a{padding:0px 10px; margin-right:20px;}
div.myAppBot{position:relative;}
div.homeLeft{background:orange; width:100px; height:270px;}
div.homeLeft a{display:block;}
div.homeRight{background:cyan; width:400px; height:270px; position:absolute; top:0px; right:0px;}
</style>
<div ng-app="myApp" class="myApp">
    <div class="myAppTop">
        <a ui-sref="home">主页</a>
        <a ui-sref="music">音乐</a>
        <a ui-sref="music.huayu">华语</a>
    </div>
    <div class="myAppBot" ui-view></div>
    <script type="text/ng-template" id='music'>
        <div class="homeLeft">
            <a ui-sref="music.huayu">华语</a>
            <a ui-sref="music.yueyu">粤语</a>
            <a ui-sref="music.zhongwen">中文</a>
        </div> 
        <div class="homeRight" ui-view></div>
    </script>
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);   
app.config(["$stateProvider",  function ($stateProvider) {      
    $stateProvider.state("home",{//父路由
        url: '/home',  
        template:"首页"
    }).state("music",{
        url:'/music',
        templateUrl :'music'
    }).state("music.huayu",{
        url:'/huayu',
        template :'华语'
    }).state("music.yueyu",{
        url:'/yueyu',
        template:'这里是粤语'
    }).state("music.zhongwen",{
        url:'/zhongwen',
        template:'这里是中文'
    });
}]);
</script> -->
<div ng-app="myApp">
    <ul>
        <li><a ui-sref="index">首页</a></li>
        <li><a ui-sref="fruit">水果</a></li>
        <li><a ui-sref="vegetable">蔬菜</a></li>
    </ul>
    <div ui-view></div>
    <script type="text/ng-template" id='homeLeft'>
        <ul>
        <li><a ui-sref="fruit.orange">橘子</a></li>
        <li><a ui-sref="fruit.apple">苹果</a></li>
        <li><a ui-sref="fruit.banana">香蕉</a></li>
        </ul>
        <div ui-view></div>
    </script>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',['ui.router']);
myApp.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/index');
    $stateProvider.state('fruit',{
       url:'/fruit',
       templateUrl:'homeLeft'
    })
    .state('vegetable',{
        url:'/vegetable',
        templateUrl:'page/home.html'
    })
    .state('index',{
        url:'/index',
        template:'<h2>这是首页</h2>'
    })
    .state('fruit.orange',{
        url:'/orange',
        templateUrl:'page/home.html',
    })
    .state('fruit.apple',{
        url:'/apple',
        templateUrl:'page/home.html'
    })
    .state('fruit.banana',{
        url:'/banana',
        templateUrl:'page/home.html'
    });
});
</script>
</body>
</html>